<template>
  <h2>添加轮播图</h2>
    <el-form :model="form" label-width="120px" >
      <el-form-item label="图片" :rules="[
        { required: true,  },
      ]">
        <el-input v-model="form.name" placeholder="请输入图片地址" style="width:500px" require-asterisk-position="left"/>
      </el-form-item>
      <el-form-item label="图片提示" >
        <el-input v-model="form.prompt" placeholder="请输入图片提示" style="width:500px"/>
      </el-form-item>
      <el-form-item label="图片链接">
        <el-input v-model="form.link" placeholder="请输入图片链接" style="width:500px"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">添加</el-button>
      </el-form-item>
    </el-form>
  </template>
<script setup lang="ts">
import { reactive } from 'vue'
import service from '../../../until/service';
import { ElMessage } from 'element-plus'
import 'element-plus/dist/index.css';
import {useRouter} from "vue-router";
const $router = useRouter();
const form = reactive({
  name: '',
  prompt:'',
  link:'',

})
// 非空验证
const onSubmit = () => {
  if(form.name == ''){
    ElMessage({
    message: '请输入图片地址',
    type: 'error',
  })
  }else if(form.prompt == ''){
    ElMessage({
    message: '请输入图片提示',
    type: 'error',
  })
  }else if(form.link == ''){
    ElMessage({
    message: '请输入图片链接',
    type: 'error',
  })
  }else{
    // 加入轮播图
    service({
    url:"/banner/add",
    method:"post",
    data:{
        img:form.name,
        alt:form.prompt,
        link:form.link
    }
  })
  .then(res=>{
    if(res.data.code==="200"){
      ElMessage({
    message: '添加成功',
    type: 'success',
  })
  $router.push('/admin/imgShow')
    }
  })
  }

}
</script>
<style scoped>
.el-main {
  --el-main-padding: 0px;
}
</style>